<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
com.jxtti.model.User userInfo = com.jxtti.utils.AuthUtil.getUserInfo(request);
String orgId=null;
if(userInfo.getDistrictId()==null || userInfo.getDistrictId().equals("0")){ //非超管
	orgId=userInfo.getOrgId().toString();
}
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=9" />
		<meta http-equiv="pragma" content="no-cache" />
		<title>按照类目 统计文章</title>
		<%@ include file="../../../common/Admin-list.jsp"%>
		<script type="text/javascript" src="<%=bpath %>Scripts/common/common.js"></script> 
 		<link rel="stylesheet" type="text/css" href="<%=basePath %>Themes/default/css/jquery.datetimepicker.css"/>    
		<script type="text/javascript" src="<%=basePath %>Scripts/jquery/jquery.datetimepicker.js"></script>
		
		<script type="text/javascript" src="<%=basePath %>Scripts/highcharts/highcharts.js"></script> 
		<style type="text/css">
        	.subtotal { font-weight: bold;font-size:20px; }/*合计单元格样式*/
    	</style>
    		
		<script type="text/javascript">
		var chart = null;var options; 
		var datagridUrl= '../ArticleList/chartArticleCyList.json';
		
		$(function(){
			$('#dataGridArticleList').datagrid({
				height:'auto',
				rownumbers:true,//设置为true将显示行数					
				striped:true, //设置为true将交替显示行背景
				fitColumns:true,//设置为true将自动使列适应表格宽度以防止出现水平滚动
				animate:true,											
				idField:'id',//id字段	
				pagination : true,//分页控件
				pageSize : 100,
			    pageList : [100, 200, 300],
			    url : datagridUrl,//投稿审核
				loadMsg : '数据装载中......',
				singleSelect : true,//设置为 true，则只允许选中一行				
				columns:[[					          								
							{field:'id',hidden:true,editor:{type:'text'}},
							{field:'categoryID',title:'组织机构id',hidden:true,width:100,align:'center',editor:{type:'text'}},	
							{field:'categoryName',title:'栏目',width:50,align:'center',editor:{type:'text'}},		
							{field:'remark',title:'文章总数',width:50,align:'center',editor:{type:'text'}},	
							{field:'isHomePic',title:'图片新闻',width:50,align:'center',editor:{type:'text'}},	
							{field:'is_contribute',title:'县级投稿',width:50,align:'center',editor:{type:'text'}}
						]] ,  
		        onLoadSuccess: function(data){  
		        	 onAppendRow();
		        }        
			});			
			
			function onAppendRow() {
	            //添加“合计”列
	            $('#dataGridArticleList').datagrid('appendRow', {
	            	categoryID: '<span class="subtotal"></span>',
	                categoryName: '<span class="subtotal">合计:</span>',
	                remark: '<span class="subtotal">' + compute("remark") + '</span>',
	                isHomePic: '<span class="subtotal">' + compute("isHomePic") + '</span>',
	                is_contribute: '<span class="subtotal">' + compute("is_contribute") + '</span>'
	            });
	        }
			
			 //指定列求和
	        function compute(colName) {
	            var rows = $('#dataGridArticleList').datagrid('getRows');
	            var total = 0;
	            for (var i = 0; i < rows.length; i++) {
	                total += parseFloat(rows[i][colName]);
	            }
	            return total;
	        }
			 
			
						
			options = {					 
					 chart: {			
						type: 'column',
						backgroundColor: {
							 linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
							 stops: [ [0, 'rgb(255, 255, 255)'], [1, '#eeeeee'] ]
						},
						borderWidth: 0,
						plotBackgroundColor: 'rgba(255, 255, 255, .9)',
						plotShadow: true, 
						plotBorderWidth: 1,					
				        zoomType: 'xy',
		    			renderTo: 'container'  ,
		    			marginLeft:60,
		    			marginRight: 20,
	                    marginBottom: 70
		             },
					 title: {				           
				            style:{
						        color:"#0088cc",
						        display:"none"
						    },
				            x: -20 
				     },			        
			        xAxis: {
			        	gridLineWidth: 1,
			        	lineColor: '#000',
			        	tickColor: '#000',
			        	labels: { 
			        		style: { 
			        			color: '#000',
			        			font: '11px Trebuchet MS, Verdana, sans-serif',
			        			fontSize:'10px' //刻度字体大小
			        		} 
				     	},
				     	title: { 
				     		ext: '最近24小时',
				     		style: {
				     			color: '#333',
				     			fontWeight: 'bold', 
				     			fontSize: '12px', 
				     			fontFamily: 'Trebuchet MS, Verdana, sans-serif' 
				     		} 
				     	}
			        },
			        yAxis: { 
			        	minorTickInterval: 'auto',
			        	lineColor: '#000',
			        	lineWidth: 1,
			        	tickWidth: 1,
			        	tickColor: '#000',
			        	labels: { style: { color: '#000', font: '11px Trebuchet MS, Verdana, sans-serif' } },
			            title: {
			                text: '投 稿 数',
			                style: { color: '#333', fontSize: '12px' }
			            },
			            plotLines: [{
			                value: 0,
			                width: 1,
			                color: '#808080'
			            }]
			        }, 
			        tooltip: {
			            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
			            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
			                '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
			            footerFormat: '</table>',
			            shared: true,
			            useHTML: true
			        },
		            plotOptions: {
		            	 line: { 
		            		 dataLabels:{
		            			 enabled: false
		            		 },
		            		 enableMouseTracking: true
		            	},
	                   column: {
		                    pointPadding: 0.2,
		                    borderWidth: 0,
		                    depth: 10
		                }		        	
		            },		                        
			        series: []	
			}; 		
			
			charAjax();		 
			
		});
		
		function charAjax(queryParams){
			//创建图表
			$.ajax({  
				type: "POST",  
		        url: datagridUrl, 
			    data:queryParams,  
			    type:'post',  
			    cache:false,  
			    dataType:'json',  
			    success:function(map) {   	    
			    	options.series=[]; 
	   			    var nameArray=[];
	   			    var yArray=[];		 
	   			 	var yPicArray=[];	
	   				var yXJArray=[];	
			    	if(map!=null&&map!=""){				    				    
			    		for(var i=0;i<map.length;i++){	    	    			
			    			nameArray.push(map[i].categoryName);
			    			yArray.push(map[i].remark);
			    			yPicArray.push(map[i].isHomePic);
			    			yXJArray.push(map[i].is_contribute);
			    		}    	    		
			    		var AQIArr={name :"文章总数", data : eval("["+yArray.join(',')+"]")} ;
			    		var PicArr={name :"图片新闻", data : eval("["+yPicArray.join(',')+"]")} ;
			    		var XJArr={name :"县级投稿", data : eval("["+yXJArray.join(',')+"]")} ;
			    		
		   			    options.series.push(AQIArr);		
		   				options.series.push(PicArr);	
		   			 	options.series.push(XJArr);				   			 	
			    	}   	
			    	// 设置X轴			 
				    options.xAxis.categories = nameArray;
				 	chart = new Highcharts.Chart(options);
			     },  
			     error : function() {  }  
			});	
		}
		
		
		function timeStamp2String(time,geshi){  
		    var datetime = new Date();  
		    datetime.setTime(time);  
		    var year = datetime.getFullYear();  
		    var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;  
		    var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();  
		    var hour = datetime.getHours()< 10 ? "0" + datetime.getHours() : datetime.getHours();  
		    var minute = datetime.getMinutes()< 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();  
		    var second = datetime.getSeconds()< 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();  
		    if(geshi=="1"){
		    	 return year + "-" + month + "-" + date+" "+hour+":"+minute;  
		    }else if(geshi=="2"){
		    	return year + "-" + month + "-" + date;  
		    }else if(geshi=="3"){
		    	 return date+"日"+hour+"时"; 
		    }
		}
		
		</script>
		
	</head>
	<body>			
		<div class="easyui-panel" fit="true" type="panel" border="false">			
		<table id="dataGridArticleList" type="dataGrid"	data-options="toolbar:'#toolBar'" >
		</table>		
		<div id="toolBar" style="height: auto;padding:0px;">
			<!--表单  搜索栏-->
			<div id="filter" class="module">					
				<ul>				 
					<li>
						<input type="hidden" id="categoryIds" value="" />		
					</li>	
					<li>
						<label>投稿时间：</label>
						<input type="text" value="" id="timestart" class="inputdate" />						
					</li>
					<li>
						<label>-&nbsp;</label>
						<input type="text" value="" id="timeend" class="inputdate" />						
					</li>
					
					<li id="liOrgId">
						<!--投稿单位：  -->
						<input type="hidden" value="" id="categoryIds" name="categoryIds" />
					</li>					
					
					<li>
						<label>&nbsp;&nbsp;&nbsp;&nbsp;所属站点：</label>						
						<select id="articleSite" class="datatype"  name="articleSite">
							<option value="0" selected="selected">&nbsp;&nbsp;外网</option>							
							<option  value="1">&nbsp;&nbsp;内网</option>	
							<option  value="2">&nbsp;&nbsp;内网&外网&nbsp;&nbsp;&nbsp;&nbsp;</option>	
						</select>		
					</li>
					<li>
						<input type="button" class="btn btn-blue-h20-w2" value="查询" onclick="searchList()" />
					</li>
				</ul>
				<div class="clear"></div>
			</div>
			<!-- chart -->
			<div id="container" style="min-width:700px;height:300px"></div>
			 
			<!--表单  列表栏-->
			<div class="list module" >
				<div class="hd">
					<h2 class="t">数据列表</h2>
					<span class="handle4filter" title="显示/隐藏查询条件"></span>
				</div>
				<div class="bd">
					<div id="toolbar">						
					</div>
				</div>
			</div>			
		</div>		
		<div id="win"></div>
	</div>
	<script type="text/javascript">	
	$('#timestart').datetimepicker({		
		maxDate : 0 ,  //'new Date()'
		format:'Y-m-d',
		lang:'ch',
		timepicker:false
	});	
	
	$('#timeend').datetimepicker({		
		maxDate : 0 ,  //'new Date()'
		format:'Y-m-d',
		lang:'ch',
		timepicker:false,		
		onShow:function( ct ){				
				this.setOptions({		
					minDate:$('#timestart').val()?$('#timestart').val():false,formatDate:'Y-m-d'					
			    });		  
		}		
	});
		
	
	function searchList() {
		var queryParams = $('#dataGridArticleList').datagrid('options').queryParams;			
		queryParams.categoryID =$("#categoryIds").val();//文章类目	
		queryParams.startTime = $('#timestart').val();
		queryParams.endTime = $('#timeend').val();		
		queryParams.articleSite =$('#articleSite').val();
		
		var statusVal=$('#articleAudit').val();
		if(statusVal==0){
			delete queryParams.status;
		}else{
			queryParams.status=statusVal;
		}		
		$('#dataGridArticleList').datagrid('load');
		$('#dataGridArticleList').datagrid('clearSelections');
				
		charAjax(queryParams); //改变图表
	}
	
	$(function() {
		if($('#timestart').val()==""){			
			var d = new Date(); //获取今天日期
			d.setDate(d.getDate() - 30);		
			var mon=d.getMonth()+1;
			var day=d.getDate();			
			var str = d.getFullYear()+"-"+(mon<10 ? "0"+ mon : mon)+"-"+(day<10?"0"+day:day);		
			$('#timestart').val(str);			
		}
		
		if($('#timeend').val()==""){
			var d = new Date();
			var mon=d.getMonth()+1;
			var day=d.getDate();			
			var str = d.getFullYear()+"-"+(mon<10 ? "0"+ mon : mon)+"-"+(day<10?"0"+day:day);	
			$('#timeend').val(str);			
		}
	});
	
	</script>
</body>
</html>